<template>
    
  <div id="news">
      <mt-header fixed title="掌游宝" class="head ">
      <mt-button  style="height: 100%; padding-top: 10%" @click.native="changeSlide" slot="left"><img style="margin-left: 20%"  src="../assets/left.png"></mt-button>
      <mt-button  style="height: 100%; padding-top: 10%; padding-right: 0px;" slot="right"><img src="../assets/right.png"></mt-button>

    </mt-header>



    <!---->
     <mt-popup v-model="popupVisible" position="left" class="sslide">
      <div class="slideLeft">
          <div class="userName">
            <img class="img-circle" src="../assets/100x100.png" alt="">
            <div class="login" @click="signIn()" v-bind:class="{'isnone':login}">
              登录
            </div>
            <div class="name" v-bind:class="{'isnone':nameStyle}">
              {{name}}
              <div class="signOut" @click="signOut()">
                注销
              </div>
            </div>
          </div>
          <div class="cell">
            <img src="../assets/100x100.png" alt="">
            <div class="stitle">
              下载管理
            </div>
          </div>
          <div class="cell">
            <img src="../assets/100x100.png" alt="">
            <div class="stitle">
              我的评论
            </div>
          </div>
          <div class="cell">
            <img src="../assets/100x100.png" alt="">
            <div class="stitle">
              我的动态
            </div>
          </div>
          <div class="cell">
            <img src="../assets/100x100.png" alt="">
            <div class="stitle">
              私信
            </div>
          </div>
          <div class="cell">
            <img src="../assets/100x100.png" alt="">
            <div class="stitle">
              修改资料
            </div>
          </div>
      </div>
    </mt-popup>

    <!---->


    <div class="slide">
      <mt-swipe :auto="2500">
        <mt-swipe-item @click.native="sliGoto(0)"><img src="../assets/swip01.png"></mt-swipe-item>
        <mt-swipe-item @click.native="sliGoto(1)"><img src="../assets/swip02.png"></mt-swipe-item>
        <mt-swipe-item @click.native="sliGoto(2)"><img src="../assets/swip03.png"></mt-swipe-item>
      </mt-swipe>
    </div>
    <div v-for="(i,index) in newsItem" class="newsItem" @click="gonews(index)">
        <img :src="getImg(index)" alt="">
        <div class="newsTitle">
            {{i.title}}
        </div>
        <div class="newsTime">
            {{i.afterTime}}
        </div>
    </div>
  </div>
</template>

<script>
  export default {
  name: 'app',
  data () {
    return {
        popupVisible:false,
        newsItem:{
            new0:{
                img:"../src/assets/news1.png",
                title:"[攻略] 《炉石传说》元素之力介绍",
                beforeTime:1492516526325,
                afterTime:""
            },
            new1:{
                img:"../src/assets/news01.jpg",
                title:"[攻略] 我的世界制作自定义密码锁图文教程",
                beforeTime:1492516526325,
                afterTime:""
            },
            new2:{
                img:"../src/assets/news02.jpg",
                title:"[攻略]王者荣耀S7露娜最强出装推荐 S7露娜怎么出装",
                beforeTime:1492447792532,
                afterTime:""
            },
            new3:{
                img:"../src/assets/news03.jpg",
                title:"[活动]《疯狂贪吃蛇》趣味多多赢好礼",
                beforeTime:1492447792532,
                afterTime:""
            },
            new4:{
                img:"../src/assets/news04.jpg",
                title:"[八卦]《诛仙》溪瑶姐妹的爆笑精彩对话",
                beforeTime:1492447792532,
                afterTime:""
            },
        }
    }
  },
  methods:{
      getImg(i){
        return this.newsItem[i].img;
      },
      gonews(i){
        console.log(i);
        this.$store.commit("news",i)
        this.$router.push({path: 'newsD'});

      },
      sliGoto(i){
        console.log(i);
      },
      signOut(){
      var _this = this;
      _this.$http.post('/users/logout').then(function (res) {
        if (res.data.result == 0) {
          console.log('用户未登录')
        } else if (res.data.result == 1) {
          console.log(res.data);
          _this.$store.commit('logout');
        }
      })
    },
    changeSlide(){
      this.popupVisible=!this.popupVisible;
     
    },
    signIn(){
      this.popupVisible=false;
      this.$router.push({path: 'signIn'})
    }
  },
  computed:{
    login(){
      return this.$store.state.login;
    },
    name(){
      return this.$store.state.name;
    },
    nameStyle(){
      return this.$store.state.nameStyle;
    }

  },
    mounted(){
    var getlength=function(jsonData){
        var jsonLength = 0;
        for(var item in jsonData){
            jsonLength++;
        }
        return jsonLength;
    }

    var myDate=new Date()
    var bTime,aTime;
    var length=getlength(this.newsItem);
    console.log(myDate.getTime());
    for(var i=0;i<length;i++){
        bTime=this.newsItem["new"+i].beforeTime;
        aTime=parseInt((myDate.getTime()-bTime)/1000);
        if(aTime/60<1){
            this.newsItem["new"+i].afterTime=aTime+"秒前"
        }else if(aTime/3600<1){
            this.newsItem["new"+i].afterTime=parseInt(aTime/60)+"分钟前"
        }else if(aTime/86400<1){
            this.newsItem["new"+i].afterTime=parseInt(aTime/3600)+"小时前"
        }else{
            this.newsItem["new"+i].afterTime=parseInt(aTime/86400)+"天前"
        }
    }
    
  }
 
}
</script>

<style>
#news{
    padding-top: 12%;

    padding-bottom:10%;

    background-color: #e5e8eb
}
#news .head{
    background-color: #2c46a5;
}
#news .slide{
  width:95%;
  background-color:#999;
  height:500px;
  margin-left:auto;
  margin-right:auto;

  margin-bottom:4%;
} 
#news .newsItem{
    padding-top: 2.5%;
    padding-left: 2%;
    width: 100%;
    height: 250px;
    text-align: left;
    border-bottom: 1px blue solid;
}
#news .newsItem img{
    width: 20.5%;
    float: left;
}
#news .newsItem .newsTitle{
    width: 75%;
    float: left;
    word-wrap: break-word;
    line-height: 100%;
    font-size: 350%;
    margin-left: 2%;
}
#news .newsItem .newsTime{
    width: 75%;
    float: left;
    font-size: 200%;
    margin-top: 4.5%;
    margin-left: 2%;
}
</style>
